<!DOCTYPE html>
<html>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
		<div th:include="common/commonHead :: atmBoHead"></div>
	</div>
	
	<div class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">
					<div th:include="common/commonLeft :: atmBoLeft"></div>
				</div>
				
				<div id="atmBoApp" class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
							
                            <div class="box">
                            	<div class="box-title"><span>添加权限</span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title"><i class="cred">*</i> 权限Key</span>
	                					<div class="content">
	                						<input type="text" class="form-control" v-model="powerKey" placeholder="请输入权限Key"/>
	                					</div>
	                        			<span class="title">权限Value</span>
	                					<div class="content">
	                						<input type="text" class="form-control" v-model="powerValue" placeholder="请输入权限Value"/>
                						</div>
                            		</div>


									<div class="two">
										<span class="title"><i class="cred">*</i> 菜单</span>
										<div class="content">
											<el-radio v-model="menu" label="1">是</el-radio>
											<el-radio v-model="menu" label="0">否</el-radio>
										</div>

										<span class="title"> URL地址</span>
										<div class="content">
											<input type="text" class="form-control" v-model="url" placeholder="请输入URL地址"/>
										</div>

									</div>


									<div class="two">
										<span class="title"><i class="cred">*</i> 菜单等级</span>
										<div class="content">
											<el-radio v-model="level" label="1">一级</el-radio>
											<el-radio v-model="level" label="0">二级</el-radio>
										</div>

										<span class="title"><i class="cred">*</i> 一级菜单</span>
										<div class="content">
											<el-form>
												<el-form-item>
													<el-select v-model="selFirstMenu" placeholder="请选择活动区域">
														<el-option v-for="m in firstMenus" :label="m.powerValue" :value="m.id"></el-option>
													</el-select>
												</el-form-item>
											</el-form>

										</div>
									</div>



                            	</div>
                            </div>
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-primary f12" v-on:click="addPower"> 创建 </button>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

	<script>
		var app = new Vue({
			el : '#atmBoApp',
			data : {
				powerKey : '',
				powerValue : '',
				menu : '',
				url : '',
				level : '',
				firstMenus : '',
				selFirstMenu : ''
			},
			created : function() {
				this.loadFirtMenu();
			},
			methods : {
				loadFirtMenu : function() {
					var that = this;

					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/power/loadFirstMenu',
						data : {
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}
							that.firstMenus = result.data;
						}
					});
				},
				addPower : function () {
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/power/addPower',
						data : {
							powerKey : this.powerKey,
							powerValue : this.powerValue,
							parentId : this.selFirstMenu,
							level : this.level,
							menu : this.menu,
							url : this.url,
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							alert('添加权限成功');
						}
					});
				}
			}
		});

	</script>
</body>
</html>
